Demo gunkan mutti bloc dalam aplikasi multiPage halama yg banyak 


& mandan 
OPEN eDIToRS 
A 
MULTIBLOC DEMO A 2 
Bg kian void main() = runApp(MyApp( ) 
ud 


import 


Demo MultiBLoC in Multipage App 


H 


= 
6 


3 


In order to run your application, type: 


$ cd. 
$ flutter run 


OUTUNE 


DEPENDENCIES Your application code is in .\lib\main.dart. 
t0005 


D Type base esa | 
Yg akan dibuat seperti ini ada angka tombol dan warnya pink ketika diklik 


€ main.dart 
OPEN EDITORS 
«4 
MULTIBLOC DEMO 5 A N 
BB idea void main => runApp(MyApp( )): 


import 


6 an 


- 
- 
< 


3 


In order to run your application, type: 


$ cd . 
$ flutter run 
ourune 


DEPENDENCIES Your application code is in .\lib\main.dart. 


Maka angka terubah warnay dan juga bisa ubah2 angka nya dgn cara diklik 


€ main.dart — 


OPEN EDITORS import : . t; TELKOMSEL KE TEKS BUT A86 M1 2039 
sę 


MULTIBLOC DEMO i — Demo MultiBLoC in Multipag 
Wa idea void main => runAppt! 5 


. 


3 


In order to run your application, type: 


$ cd. 
$ flutter run 
O0UTUNE 


saman Your application code is in .\lib\main.dart. 


Dia akan naik 
Ini kalau kembali maka tampilan juga berubah 
Dan angka nya tetap 
< 


e to seat 


emÂů&? oog 


OPEN EDITORS import 
x 
MULTIBLOC DEMO 


Bm idea void main => runApp(MyApp( )): 


Bar 


- 
- 
& 


3 


In order to run your application, type: 


S ed. 
$ flutter run 
ourune 


DEPENDENCIES Your application code is in .\lib\main.dart. 
T000s 


D Type here to searc 
Jadi yg akn buat seperti ni 
Langusg saja 
Ke main dart 


Oo & 


XI Fe Edit 


OPEN EDITORS import 
xi 
MULTISLOC DEMO è RREA 

Wa idea void main => runApp(MyApp( )): 


5 


- 
ê 


3 


In order to run your application, type: 


Sed" 
$ flutter run 


Your application code is in .\lib\main.dart. 


D a oN e mA Tee 3 
Supaya rapi disni akan buat foldre 
Ui dan bloc 

Dalam ui ada draft_page.dart 

Ini akan buat untuk gunakan page lain untuk template 
Disni buat material dart 

stl 

Kembalikan scafoold 

Appbar lalu kasih backround nya 

Judulny ganti menjadi 

Lalu disni ada body . isinya body 

Sekarang minta paramater nya bcakround dan body nya 
Buat controctor nya 

Kasih ping untuk defaultnya 


onlie 


X] Fie Edit Selection View 


Debug Terminal Hel © draft page dart 
Q & draft pageda 6 


OPEN EDITORS 1 UNSAVED import 
G 

So Trek pagadan 

a aan class DraftPage extends StatelessWidge 
m id final ( backgroundColor; 

final Widget body; 


. 
- 
- 


DraftPage(fthis.body, this.backgroundColor = Colors.pink)): 
verride 
Widget build(BuildContext context) { 
return S 
appBar: A 
backgroundColor: backgroundColor, 
title: Text( i 


, 

body: body, 
»: 
} 


3 


In order to run your application, type: 


$ cd. 
$ flutter run 


OUTUNE 
DEPENDENCIES 


Your application code is in .\lib\main.dart. 
T000s 


Buat lagi yg lain 
Main page.dart 
Import material 
Stl 

Return nya DraftPage 

Jgn lupa body didalmnya 

Center Column( children nya text untuk angka nya isi 0 

Lalu punya raisedButon onprased kosongi lalu child text dgn tul:isan ganti 
Lalu colors yg pertama kasih pink 

Shape nya stadiumBorderl) 

Lalu disini backroundClor kasih pink 


naik? Ooo iB 
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main page dart 
OPEN EDITORS 1 UNSAVED package:flutter/material.dart': 
5 'package:multibloc_demo/ui/draft_page.dart'; 


peranan Sa ( 
a 


zx build( context) { 
a return 

mt backgroundColor: .pink, 

— body: 


children: < 
Co"), 
( 
onPressed: (){}, 
chil ("Click to Change" 
colo .pink, 
shape: 0, 


Ð oum finer 


In order to run your application, type: 


$ ed. 
$ flutter run 


OuTuNE 


ora Your application code is in .Nliblmain.dart. 
10005 


0:400 
AN MI 


1) lala] Lim SISI Pi 
Ke main nya kita b uat 

Stl namanya MyApp 

Di kembalikan materialApp 

Bener false 

Lalu home nya MainPAgel() import 
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VARIABLES 'package:flutter/material.dart 
'package:multibloc demo/ui/main page.dart' 


main() = runApp( 0); 


i 


build( context) { 
return | 
debugShowCheckedModeBanner: 
—home: (yi 


Ji 


CALL STACK 


BREAKPOINTS 


1 AAA pw SE ear 
Tngal di perbaiki 

Disin kasih textStyle color white 

Lalu columnya 


mainAxis jadi min. 


Ukuran fontnya 40 fontweight ubah jadi bold 
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VARIABLES 


WATON 


BREAKPOINTS 


05:32 
|| Ke i Sa 


Kita lihat 
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VARIABLES 


CALL STACK 


BREAKPOINTS 


05:38 
Di) im) Eat SS 


Bantuan 


Bantuan 


man page dart 
'package:flutter/material.dart'; 
package:multibloc_demo/ui/draft_page.dart'; 


i 


build( context) | 
return ( 
backgroundColor: .pink, 
—body: ( 
child: ( 
mainAxisSize: 
children: « 
( 
"o", 
style: (fontSize: 40, fontWeight: 
» 
( 
onPressed: () {}, 
—child: ( 
"Click to Change", 


n debug mode 
p-debug 

@ librari 

@ librari 


man page dart 
package:flutter/material.dart'; 
package:multibloc_demo/ui/draft_page.dart'; 


{ 


build( context) { 
return | 
backgroundColor: .pink, 
-body: ( 
child: ( 
mainAxisSize: 
children: « 
( 


"o", 


style: (fontSize: 40, fontWeight 
», 


( 


onPressed: () 4), 


476 librari 
476 libra 


Maka sudah berubah menjadi seperti ini 
Sekarng buat second page nya 


Kita buat di ui nya 
Import material 
St 


Lalu return nya dibuat 
DraftPage 
Disini backroundcolors kasih pink dulu 
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second pagedart 6 
OPEN EDITORS 1 UNSAVED package:flutter/material.dart'; 

gai 'package:multibloc demo/ui/draft page.dart' 
MuULTISLOC Demo 

build( context) { 
return 

backgroundColor: .pink, 
body: , 


H 


OuTumE 


DEPENDENCIES 


06:21 


IN Ke (cal (Sisi a ai 
Body sama seperti mainPage dimulai dari center 
Copy paste 
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child: ( 
mainAxisSize: 
children: < 
( 
"o", 
style: (fontSize: 40, fontWeight: 


), 


MULTIBLOC DEMO 


( 
onPressed: () 4), 
child: ( 
"Click to Change", 
style: (color: white), 
», 
color: .pink, 


shape: 0, 


ouTUNE 
DEPENDENCIES 


1 cm a ASP me | 
Beda nya disecondpage button nya 3 buah 

Mak buton dibugkus jadi row 

raisedButton gk punya isinya jadi child nya dihapus 


shape itu lingkaran bukan stadiumBorder 
berarti disni border kita pakai circle border 
lalu kita copy 3 x 

ganti warnnya 
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@ second pagedan 


e(fontSize: 40, fontWeight: FontW 


cond page dart 
MuLTISLOC DEMO 
onPressed 
color: 


onPressed , 
color: ors.purple, 


Border(), 


ouTumE 
DEPENDENCIES 


07:24 20:11 


>| mm a FE 0 4 
Lalu di mainPAge kita pindah kesini kita arahkan ke seconPage 

Pakai navigator.push 

Context, materialPageRoute lalu return secondPage jgn lupa import 
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& main pagedart © & 


rs.pink, 
o & main pa 
PE 


MULTIBLOC DEMO 


extStyle(fontSize: 40, fontweight: ntWeight.bold), 


tton 
ssed: () 1 
r.push(context, MaterialPageRoute(builder: (context) = SecondPagel ))): 


, 
e(color: Colors.white), 


OuTumE 
DEPENDENCIES 
T0005 


08:00 20:11 


Lalu jalankan 


Sekarang kita coba klik sudah ada 
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man page dart 
VARIABLES return 
backgroundColor: 
body: ( 
child: ( 
mainAxisSize: 
children: « 
( 
"9", 
style: (fontSize: 
» 
( 
onPressed: () ( 
.push(context, 
}, 
child: ( 
"Click to Change", 
style: color: 
)s X 


color: .pink, 
CALL STACK 


08:16 
Di) im) Ea SS 


Si button nya ini kita benarkan center dahulu 
Row nya mainaxis jadi center 
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second page dart 


VARIABLES 


style: (fontSize: 
), 
( 
mainAxisAlignment : 
children: « >[ 


onPressed: () {}, 
color: .pink, 
shape: ©, 


onPressed: () {}, 
color: .amber, 
shape: Oo, 


onPressed: () 1), 
color: .purple, 
shape: O; 


08:36 
DI Kea E SS 


Maka ditengah jadi seperti ini 
Berikutnya buat bloc nya 

Di folder bloc 

New file 


40, 


40, 


K 


Color bloc.dart 

Import dahulu bloc nya 
Cara nya 

Ctrl + p 

Pakai punspec Assist 
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pubspec yomi 


OPEN EDITORS 


1.0.0+1 


ourume 
DEPENDENCIES 


>l mm a SeN me il 
lalu cari bloc 
Disini ada flutter bloc 
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OPEN EDITORS 


"22.1.0 3.0.0" 


ouTumE 


DePEnDencIEs 


>| aa Da BS PAI 
Maka otomatis memasukan flutter bloc terbaru 
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Imultibloc demo) flutter packages get 
Running "flutter pub get" in multibloc demo... 


E tempa calm Salz mg” 4 
Untuk lihat cara men package bloc seperti ini maka lihat di 
Me.talk nomor 2 

Bebrapa plugin yg sering dipakai 

Kembali ke colors bloc 

Kita import bloc 

Class ColorBloc extend Blocx- 

Diatasnya buat enum ColorsEventi ) dia mengubah looping 
Disni dia menerima Colors Event, lalu akan kembalikan colors 
Kita import material dart 

Lalu kita ovirde 
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package:bloc/bloc.dart'; 
packag lutter/material.dart'; 


(toPink, toAmber, toPurple) 


« 


|| 


[multibloc_demo] flutter packages get 
Running "flutter pub get" in multibloc demo... 
exit code 0 


OuTumE 


DEPENDENCIES 


H KERI ci (sisix me Ai 
Disni ganti colors.pink untuk initialState nya 

Lalu di stream 

Async* 

Yield tergantung dari event nya == colors.toPink kalau gk cek lagi 

: (event == ColorsEvent.amber) ? colors.ember kalau bukan juga kembalikan 

: colors.purple 
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color bor dan 
OPEN EDITORS 'package:bloc/bloc.dart'; 
ISF 'package:flutter/material.dart'; 
{ toPink, toAmber, toPurple } 
< 
initialState = 
< > mapEventToState( event) asyncx | 
yield (event — . toPink 


? .pink 
event — .toAmber) ? 


Hutter 


[multibloc_demo] flutter packages get 
Running "flutter pub get" in multibloc demo... 
exit code 0 


ouTUNE 
DEPENDENCIES 


II em CW EE ne 
Ini untuk colors bloc nya 
Sekarang buat counter bloc 


Buat file counter bloc.dart 

Disni juga sama 

Import bloc 

Class CounterBloc extends Blocxdia masukan integer, kembalikan juga inti 
intialState naya 0 

nanti akan di yeard nilai yg baru maka si event 

counter hbloc hanya seperti ini 


A 57.FLUTTER 54. Multi-BLoC in Multipage App.mp4 - VLC media player = Xx 


Media Playback Audio Video Terjemahan Peralatan Tampilan Bantuan 


bug 


initialState 5 0; 


< > mapEventToState 
event; 


[multibloc_demo] flutter packages get 
Running "flutter pub get" in multibloc demo... 
exit code 9 


11:44 
|| Ke DI 


sisix mpe il 
Sekarang kita pasang multiBloc nya 

Kita kembali ke maindart 

Untuk pasang multiBloc gunakan multiBloc provider 

Tapi kita punya multi page juga page nya ada banyak 

Supaya semua page dapat si bloc yg kita sediakan 

Jadi multibloc ditaruh di materialPage bukan di home 

Biasa nya bungkus di home karena satu page 

Ini karena banyak maka dibungkus materialApp nya 

Klik nanan refactor widget 

MultiBlocProviders lalu import bloc nya 

Didalamnya provider isinya dikasih kumpulan bloc nya 

Kasih tipe nya ColorBloc dan CounterBloc dan jgn lupa import juga 
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Q 


OPEN EDITORS 1 UNSAVED 


main = runApp 


build context 


providers: 
>(builder: (context) = 
In »(builder: (context) => 


child: 
debugShowCheckedModeBanner: 
home: 


Imultibloc demo) flutter packages get 
Running "flutter pub get" in multibloc demo... 
exit code 0 


OuTumE 


DEPENDENCIES 


13:22 


B| m/m») EINE SISIA “a 
Sudah beres untuk main dart 


Sekarang ke mainPage 

Kita ubah warnya appbar nya dan sama raised button maka itu kita bungkus disni 
Di draftpage 

BlocBuilder<colorsBloc, color-( 

Bukan child tapi builder 

Dia butuh context paramternya lalu colors yg diberikan itu namanya apa colors 


Jadi backroundColor dia ubah jadi color 
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main page.dan © 
OPEN EDITORS 1 UNSAVED packa flutter/material.dart ': 
p 'package:flutter bloc/flutter bloc.dart': 
packa multibloc demo/bloc/color bloc.di 
'packa multibloc demo/ui/draft page.dart 
package:multibloc demo/ui/second page.dart'; 


{ 


build( context) { 
return < , DI 
—builder: (context, color) => 
backgroundColor: color, 
body: ( 
L child: | 
mainAxisSize: 
children: « 
( 
"o", 
style: (fontSize: 40, fontWeight: 
», 


Imultibloc demo) flutter packages get 
Running "flutter pub get" in multibloc demo... 
exit code 0 


OUTUNE 
DEPENDENCIES 


H EnA pw EER mp” | 
Dan btton juga colors 
Menyesuaikan dgn warnanya yg ada di bloc 
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OPEN EDITORS 


style: fontSize: 40, fontWeight: 
?», x 
( 
onPressed: 
.push(context, (builder: (context) 
bo 
—child: 
"Click to Change", 
style: (color: 
4 | 
color: color, 
shape: 


Imultibloc demo) flutter packages get 
Running "flutter pub get" in multibloc demo... 
exit code 0 


OuTuNE 


DtpenoenciEs 


IN da Tm Fs me i 
Dan angka juga dibungkus dgn BlocBuilder dia itu dari CounterBloc, int jgn lupa 
import 

Builder: butuh contetx, lalu angkanya number 

Disini ganti number.toString 
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build( 
return 
builder: (context, color) = 
backgroundColor: color, 
—body: ( 
ana L- child: 
MRT. peno mainAxisSize: 
mi children: « >[ 
android 7 2 
builder: (context, number) => 
number .toString( )|, 
style: (fontSize: 40, fontWeight: 


> 
1 


= 
- 
a 
-t 
Ja 
( 
onPressed: 


.push(context, 
(builder: (context) => 


child: 
u Fimer 
[multibloc_demo] flutter packages get 


Running "flutter pub get" in multibloc demo... 
exit code 0 


OuTumE 


DEPENDENCIES 


Sl KRIA Lil SISI mg” 4 
Sekarang pindah ke scondPage 

Juga sama 

draftPage juga bungkus BlocBuilder dari colorsBloc, colors dan jgn lupa import 


builder: context, color => DraftPage 
lalu backround jadi color 
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second paged 


Sean POTIOOS KANA package:multibloc demo/bloc/color bloc.dart'; 


package:multibloc demo/ui/draft page.dart'; 


1 


build( context) { 
return < , >( 
builder: (context, cplor) = 
backgroundColor: color, 
body: ( 
L child: 
mainAxisSize: 
children: « 
( 
"9", 
style: fontSize: 40, fontWeight: 
), € 
( 
mainAxisAlignment : .center, 
children: « » 


Imultibloc demo) flutter packages get 
Running "flutter pub get" in multibloc demo... 
exit code 9 


OuTuNE 
DEPENDENCIES 


lalu disni textnya kita bungkus juga blocBuilder ini dari counterBloc import juga 
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wuuy » 
L child: 
mainAxisSize: 
children: « >[ 
< , >( 
builder: (context, number) = 
number .toString( )|, 
style: (fontSize: 40, fontWeight: 


OPEN EDITORS 1 UNSAVED 


», 
( 
mainAxisAlignment : .center, 
children: « >[ 
( 
onPressed: () {}, 
color: .pink, 
shape: 0, 
), € 
( 
onPressed: () {}, 
color: .amber, 
uiu! Fimer 
[multibloc_demo] flutter packages get 
Running "flutter pub get" in multibloc demo... 
exit code 0 


OuTumE 


DEPENDENCIES 


H HAR ci SS] mg” 4 
Terus pindah ke button 

Disini dishape akan diubah jadi kepilih itu ada border nya warna hitam 

Kalau gk dipilih maka gk ada 

Supaya ada border itu tambhakan BorderSide color: black widhnya 3 

Seprti ini supaya diselect warna pink 

Color == colors.ping ? kalau maka jadi Circle colors biasa 


Kita copy paste dibawah button nya 
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Q second pagedart © 
OPEN EDITORS 1 UNSAVED ma1nAx1sAlignment: .center, 
hain dart children: « » 
( 

onPressed: () 
color: 

shape: (color 
? 


side: ? .black, width: 3)) 


); 
( 


onPressed: () 
color: 
shape: 

), 

( 
onPressed: () 
color: 
shape: 


», 


Imultibloc demo) flutter packages get 
Running "flutter pub get" in multibloc demo... 
exit code 0 


OuTunE 


DEPENDENCIES 


17:10 


p km mi IM Sisi me i) 


Dan juga sama ini kalau diipilih nya ember 
Purle juga sama 
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second pagedart 6 
), f 
( 
onPressed: () {}, 
color: .amber, 
shape: (color — 
? ( 
side: .black, width: 
0, 


MULTIBLOC DEMO 


), 
( 

onPressed: () {}, 

color: .purple, 

shape: (color — .purple) 

? ( 
side: color: .black, width: 

0, 


ur Hutter 
Imultibloc demo) flutter packages get 

Running "flutter pub get" in multibloc demo... 

exit code 0 


OuTuNE 


DEPENDENCIES 


p | Ka DU SISIA me ii 
Kita save 

Sekarang kita tambhakn onprased nya 

Ketas dulu disni kita buat 

ColorBloc colorBloc 

Dan juga counterBloc 
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OPEN EDITORS 1 UNSAVED 'package:flutter/material.dart'; 
a 'package:flutter_bloc/flutter_bloc.dart'; 
'package:multibloc_demo/bloc/color_bloc.dart'; 
packa multibloc demo/bloc/counter bloc.dart'; 


package:multibloc demo/ui/draft page.dart'; 


1 


build( context) { 
r - »(context): 
| = z >(context); 
return < , 
builder: (context, color) => 
backgroundColor: color, 
body: ( 
—- child: 
mainAxisSize: .min, 
children: « >[ 
< - »( 
builder: (context, number) => 


Imultibloc demo) flutter packages get 
Running "flutter pub get" in multibloc demo... 
exit code 0 


ourumE 
DepenoenciEs 


Sekarang juga kebawah raisedbutton warna pink ini diklik maka diubah warna pink 


Colors.dispand(toPink 
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second pagedart @ 
numuti e LUD LL LIA Jp 


style: (fontSize: 40, fontWeight: 


OPEN EDITORS 1 UNSAVED 


», 
( 
mainAxisAlignment : .center, 
children: « 
— ( 
onPressed: () { 
colorBloc.dispatch .toPink): 


pink, 
(color 


side: .black, width: 


( 

onPressed: () 1), 

color: .amber, 

shape: (color 

D oumu Hutter 

Imultibloc demo) flutter packages get 
Running "flutter pub get" in multibloc demo 
exit code 0 


ourume 
DEPENDENCIES 


p Waw a BER 7: 
Ember juga sama 
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second pagedan © 
OPEN EDITORS 1 UNSAVED cutLorotot.uLspattii s LOPLIIK)5 
F, 
color: .pink, 
shape: (color — 
? 
side: 5 “black, width: 3)) 


» 
( 
onPressed: () ( 
colorBloc.dispatch .toAmber): 


.amber, 
(color — .amber) 


side: (color: .black, width: 3)) 


( 
onPressed: () 4), 
color: nurnle 
» o Hutter 
Imultibloc demo) flutter packages get 
Running "flutter pub get" in multibloc demo 
exit code 0 


ourunE 
DEPENDENCIES 


15:38 ——— e a  ——— —— — o mm 20:11 
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OPEN EDITORS 1 UNSAVED 


onPressed: () { 

colorBloc.dispatch .toAmber): 
F, 
color: .amber, 


n shape: (color = „amber ) 
muneoc vemo ? ( 


< side: (color: .black, width 


0, 
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onPressed: () 1 
colorBloc.dispatch .toPurple); 

h 

color: purple, 

shape: (color — .purple) 

? ( 
side: (color: “black, width: 

0, 


- 
- 
æ 

4 al ), 
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)o 
D oum rime 
[multibloc_demo] flutter packages get 
Running "flutter pub get" in multibloc demo... 
exit code 0 
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Sekarang text nya jika diklik maka ditambahkan satu 

Jadi text kita bunbgkus lagi dgn gtestureDetectore 

Ontap nya counterBloc.dispand(number nya + 1) 


57.FLUTTER 54. Multi-BLoC in Multipage App.mp4 - VLC media player — x 


Media Playback Audio Video Terjemahan Peralatan Tampilan Bantuan 


second pagedart 6 


OPEN EDITORS 1 UNSAVED 


return < , 
builder: (context, color) => 
backgroundColor: color, 
body: ( 
L child: 
mainAxisSize: .min, 
children: « >[ 
< , >( 
builder: (context, number) = 
onTap: () { 
counterBloc.dispatch(number + 1); 
h 
child: ( 
number.toString( ), 
style: (fontSize: 40, fontweight: 
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Running "flutter pub get" in multibloc demo... 
exit code 0 
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builder: text, number) => 
onTap: 
counterBloc.dispatch(number + 
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child: 

number.toString( ), 

style: fontSize: 40, 
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Running "flutter pub get" in multibloc demo... 
exit code 0 
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